<template>
  <div class="inquiry-detail">
    <div>
      <div class="p40">
        <div class="record-cell">预约详情</div>
      </div>
    </div>
    <div>
      <group>
        <cell title="出诊地区">{{detail.doctorUserCoreDTO.province}}{{detail.doctorUserCoreDTO.city}}{{detail.doctorUserCoreDTO.district}}</cell>
        <cell title="医疗机构">{{detail.doctorUserCoreDTO.company}}</cell>
        <cell title="联系地址">{{detail.patientUserCoreDTO.address}}</cell>
        <cell title="联系人">{{detail.patientUserCoreDTO.trueName}}</cell>
        <cell title="联系方式">{{detail.patientUserCoreDTO.mobile}}</cell>
      </group>
    </div>
    <div style="background: #f4f4f4;height: .2rem"></div>
    <div>
      <div class="p40">
        <div class="record-cell flex-box-align">
          <div class="flex">预约情况</div>
          <div class="btn-more flex-box-align" @click="linkToAppointList">
            <span style="float: left">更多</span>
            <img src="../../images/rightArrow.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <ul class="appoint-list flex-box-justify">
      <li @click="linkToAppointDetail(item.visitDate)" v-for="(item, index) in list[0]" :key="index" v-if="index <= 2">
        <div style="white-space: nowrap;overflow: hidden">
          <span>{{item.weekDay}}</span>
          <span>{{item.visitDate}}</span>
        </div>
        <div>{{status[item.status]}}</div>
        <div>{{item.realAmount}}/{{item.planAmount}}</div>
      </li>
    </ul>
  </div>
</template>
<script>
  import {parseUrlParams} from "../../../wechat/static/util/util.js";
  import { Cell, Group} from "vux";
  let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");

  export default {
    data() {
      return {
        id: "",
        status: {
          "on": "可预约",
          "off": "休息",
          "full": "约满",
          "none": "无安排"
        },
        detail: {},
        list: []
      }
    },
    components: {
      Cell, Group
    },
    mounted() {
      this.id = parseUrlParams("id");
      this.getDetail()
      this.getList()
    },
    methods: {
      getDetail() {
        common.requestAjax(CONSTANT.URL.PATIENT.APPOINTDETAIL, {}, {id: this.id}, (res) => {
          if (res.status == 200) {
            this.detail = res.data.bussData;
          }
        })
      },
      getList() {
        common.requestAjax(CONSTANT.URL.VISIT.APPOINTDAYDETAIL, {}, {}, (res) => {
          if (res.status == 200) {
            this.list = res.data.bussData;
          }
        })
      },
      linkToAppointList() {
        this.$router.push({path: "/inquiry/appoint/list"})
      },
      linkToAppointDetail(date) {
        this.$router.push({path: "/inquiry/appoint/detail", query: {date: date}})
      }
    }
  };
</script>
<style lang="less">
  .record-cell {
    border-left: .04rem solid #0063AE;
    padding-left: .14rem;
    position: relative;

  }

  .p40 {
    padding: .4rem .3rem 0 .3rem;
  }

  .inquiry-detail {
    font-size: .34rem;
    height: 100%;
    /*background-color: #f4f4f4;*/
    .btn-more {
      span {
        margin-right: .16rem;
        color: #666;
      }
      img {
        /*vertical-align: middle;*/
        width: .18rem;
        height: .35rem;
      }
    }
    .appoint-list {
      padding: .4rem .3rem;
      li {
        width: 1.65rem;
        height: 1.65rem;
        font-size: .24rem;
        background:rgba(255,255,255,1);
        box-shadow: .06rem 1px .06rem rgba(0,0,0,0.1);
        padding: .24rem .16rem .19rem .16rem;
        margin-right: .1rem;
        &:last-child {
          margin-right: 0;
        }
        div {
          text-align: center;
          &:first-child {
            margin-bottom: .29rem;
            span:last-child {
              color: #999;
            }
          }
          &:nth-child(2) {
            margin-bottom: .19rem;
            font-size: .3rem;
          }
        }
      }
    }
  }
</style>
